<template>
  <a-modal
    :open="open"
    width="1200px"
    :title="formState?.id ? '修改屈光发育档案' : '新增屈光发育档案'"
    centered
    :ok-button-props="{ disabled: !isCompleted }"
    ok-text="保存"
    :keyboard="false"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex justify-between">
      <a-form :model="formState" :colon="false" class="form-style-flex" style="width: 44%">
        <a-form-item label="检查日期" class="w-1/2" v-bind="validateInfos.chkTime">
          <a-date-picker v-model:value="formState.chkTime" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="视光医师" class="w-1/2" v-bind="validateInfos.docterEmpName">
          <SelectTable v-model:value="formState.docterEmpName" type="医生" table-width="720" placeholder="请选择" @select="onSelectYs($event)" />
        </a-form-item>
        <a-form-item label="身高" class="w-1/2 flex">
          <a-input v-model:value="formState.patientHeight" placeholder="请输入" suffix="cm" />
        </a-form-item>
        <a-form-item label="体重" class="w-1/2 flex">
          <a-input v-model:value="formState.patientWeight" placeholder="请输入" suffix="Kg" />
        </a-form-item>
        <a-form-item label="全身病" class="w-full">
          <a-input v-model:value="formState.patientDiseases" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="所在学校" class="w-full">
          <a-input v-model:value="formState.patientSchool" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="备注" class="w-full">
          <a-textarea v-model:value="formState.memo" placeholder="请输入" :rows="11" />
        </a-form-item>
      </a-form>
      <div style="width: 54%">
        <div class="w-full h-8 flex items-center justify-end" style="background-color: #f2f2f2">
          <p class="mb-0 w-2/5 text-center mr-8">右眼 OD</p>
          <p class="mb-0 w-2/5 text-center">左眼 OS</p>
        </div>
        <a-form :model="formState" :colon="false" class="form-style-flex" :label-col="{ style: { width: '100px' } }">
          <a-form-item label="裸眼视力" class="w-full mt-2">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odVa" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osVa" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="屈光度" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odDiopter" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osDiopter" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="散光度" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odAstigmia" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osAstigmia" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="轴位" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odAxis" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osAxis" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="矫正视力" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odCva" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osCva" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="眼病" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odDiseases" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osDiseases" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="NCT" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odNct" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osNct" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="眼轴" class="w-full">
            <div class="flex justify-between">
              <a-input v-model:value="formState.odEyeAxis" placeholder="请输入" class="mr-4" />
              <a-input v-model:value="formState.osEyeAxis" placeholder="请输入" />
            </div>
          </a-form-item>
          <a-form-item label="角膜曲率" class="w-full">
            <div class="flex justify-between">
              <div class="flex justify-between items-center mr-4">
                <a-input v-model:value="formState.odKeratometricK1" placeholder="请输入" />
                <span class="mx-0.5">/</span>
                <a-input v-model:value="formState.odKeratometricK2" placeholder="请输入" />
                <span class="mx-0.5">@</span>
                <a-input v-model:value="formState.odKeratometricAx" placeholder="请输入" />
              </div>
              <div class="flex justify-between items-center">
                <a-input v-model:value="formState.osKeratometricK1" placeholder="请输入" />
                <span class="mx-0.5">/</span>
                <a-input v-model:value="formState.osKeratometricK2" placeholder="请输入" />
                <span class="mx-0.5">@</span>
                <a-input v-model:value="formState.osKeratometricAx" placeholder="请输入" />
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  patientInfo: {
    type: Object,
    default: () => ({})
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:open', 'success'])
const formState = ref({
  chkTime: dayjs().format('YYYY-MM-DD')
})
const rulesState = ref({
  chkTime: [{ required: true, message: '请选择日期' }],
  docterEmpName: [{ required: true, message: '请选择视光医师' }]
})
const { isCompleted, resetFields, validate, validateInfos } = useForm(formState, rulesState)

const onOk = async () => {
  await validate()
  const { code, msg } = await post('/optometry/ooadolescentcheck/doSaveOoAdolescentCheck', {
    ...formState.value,
    brId: props.patientInfo?.brId
  })
  if (code !== 0) return message.error(msg)
  message.success(msg)
  resetFields()
  emit('update:open', false)
  emit('success')
}
const onSelectYs = (e) => {
  formState.value.docterEmpName = e.empName
  formState.value.docterEmpId = e.empId
}
const onCancel = () => {
  resetFields()
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData.id) {
        formState.value = { ...props.rowData }
      } else {
        formState.value = { chkTime: dayjs().format('YYYY-MM-DD') }
      }
    }
  }
)
</script>
<style lang="less" scoped>
.ant-form {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 90px;
    }
  }
  .ant-picker {
    width: 100%;
  }
}
</style>
